<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-01-09 11:32:30
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-06-26 17:52:02
 * @FilePath: /meeting-minutes-h5/src/views/study/components/courseList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-col">
    <!-- 组 -->
    <div v-for="session of chapterList">
      <div class="flex flex-row items-center px-4 py-4" @click="toggle(session)">
        <transition name="name-fade">
          <img
            src="@/icons/svg/minute/arrow.svg"
            :class="`w-[16px] transform ${!session.hidden ? 'rotate-180' : ''}`"
          />
        </transition>

        <h2 class="ml-2 text-[#262626] font-weight-medium">
          {{ session.chapterName }}
        </h2>
      </div>
      <!-- 行 -->
      <courseCell
        v-if="!session.hidden"
        v-for="item of session.kngList"
        :item="item"
        :key="item.id"
        :isPlaying="item.fileId === currentFileId"
        @click="onClickItem(item)"
      />
    </div>
  </div>
</template>

<script>
import courseCell from "./courseCell.vue";
import { mapState } from "pinia";
import { useStudyStore } from "@/store";

export default {
  name: "courseList",
  components: {
    courseCell,
  },
  props: {
    currentFileId: {
      type: String,
    },
  },
  emits: ["clickItem"],
  methods: {
    toggle(session) {
      session.hidden = !session.hidden;
    },

    onClickItem(item) {
      this.$emit("clickItem", item);
    },
  },
  computed: {
    ...mapState(useStudyStore, {
      courseData: "courseData",
    }),

    chapterList() {
      return this.courseData?.chapterList;
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped></style>
